<template>
	<view class="big-box flex-col align-center">
	<!-- 	<top-navigation backIconColor='#FFF' bgColor="#CC1D1D" :isFix='true' :isShow='true'>
			<text slot='center-slot' class="center-slot"></text>
		</top-navigation> -->
		<x-img class="nav-img" radius="20rpx" :src="info.cover" width="670rpx" height="393rpx"></x-img>
		<view class="tab-type">
			<view class="title">
				{{info.title}}
			</view>
			<view class="tag-box justify-start align-center">
				<view class="tag" v-for="v,k in info.tag" :key="k">
					{{v.title}}
				</view>
				<image class="zan-icon" src="/static/images/airvip/zan.png" mode=""></image>
				<image class="zan-text-icon" src="/static/images/airvip/zan-text.png" mode=""></image>
			</view>
			<view class="tip">
				{{info.tips}}
			</view>
			<view class="tips align-center"
				:style="{background:'url('+baseImg+'/static/images/airvip/router-tips.png)  no-repeat center center / 100% 100%'}">
				<image class="location" src="/static/images/airvip/location.png" mode=""></image>
				{{info.address}}
			</view>

		</view>
		<view class="" style="width: 100vw;height: 16rpx;background: #F1F1F1;">

		</view>
		<view class="food" v-if="info.feature.length">
			<view class="food-name">
				热食
			</view>
			<view class="food-info justify-start align-center" v-for="v,k in info.feature" :key="k">
				<view class="food-icon">
					<x-img :src="v.icon" width="61rpx" height="61rpx"></x-img>
				</view>
				<view class="">
					<view class="food-title">
						{{v.title}}
					</view>
					<view class="food-tips">
						{{v.describe}}
					</view>
				</view>
			</view>
		</view>
		<view class="facilities" v-if="info.facilities.length">
			<view class="facilities-name">
				设施
			</view>
			<view class="facilities-info  ">
				<view class="flex-col align-center" v-for="v,k in info.facilities" :key="k">
					<view class="facilities-icon ">
						<x-img :src="v.icon" width="94rpx" height="94rpx"></x-img>
					</view>
					<view class="facilities-title">
						{{v.title}}
					</view>
				</view>
				
			</view>
		</view>
		<view class="food ">
			<view class="food-name">
				详情
			</view>
			<view class="" style="">
				<u-parse :content='info.content'></u-parse>
			</view>
		</view>
		<view class="food">
			<view class="food-name">
				服务须知
			</view>
			<view class="" style="notice">
				<u-parse :content='info.notice' :tagStyle="style"></u-parse>
			</view>
		</view>
		<notice-modal
		 :url="`/airvip/order/order?id=${info.id}`"
		 :carNote='notice' v-if="noteShow" :isShow='noteShow'
			@close='noteShow=false'></notice-modal> 
		<bottom-btn @onClick='reservation'>在线预定</bottom-btn>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		
		data() {
			return {
				style: {
									// 字符串的形式
									p: 'line-height:1.5',
								},
				notice:'',
				noteShow:false,
				isMsg: false,
				location: '沈阳',
				searchKey: '',
				oldscrollTop: 0,
				pageListData: {},
				tabCurrent: 0,
				current: 0,
				current2: 0,
				info: {
					feature: [],
					facilities:[]
				},
				pageInfo: {
					page: 1,
					row: 10,
					total: 1,
				},

				banner: [

				],
				vip_list: [],
				home_text: [],
				info_list: [],
				list2: [{
					name: '礼宾车',
					ind: 0,
				}, {
					name: '权益卡',
					ind: 1,
				}, {
					name: '餐饮服务',
					ind: 2,
				}, {
					name: '辽品甄选',
					ind: 3,
				}, ]
			}
		},
		computed: {
			calculateHeight() {
				return `calc(${this.statusHeight}px + ${88}rpx)`;
			},
			bannerHeight() {
				return `calc(${this.statusHeight}px + ${88+112}rpx)`;
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			baseImg() {
				return this.$baseImg;
			},
			
		},
		onLoad(o) {
			console.log(typeof o.id);
			if (o.id != 'undefined') {
				this.getDetail(o.id)
			}
		},
		methods: {
			...mapActions(['getRestroom', 'getVipRoomDetail']),
			reservation(){
				this.noteShow = true
			},
			async getDetail(id) {
				let res = await this.getVipRoomDetail({
					id
				})
				console.log('res.info', res.info);
				this.info = res.info
				this.notice = res.notice
				// this.pageInfo = {
				// 	page: res.current_page,
				// 	row: res.per_page,
				// 	total: res.total,
				// }

			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	body *,
	page view {
		box-sizing: border-box;
		flex-shrink: 0;
		line-height: normal;
	}
	.big-box {
		padding-bottom: 200rpx;
		.food {
			width: 100vw;
			padding: 38rpx 40rpx 0 40rpx;
			.notice{
				
			}
			
			.food-name {
				margin-bottom: 38rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}

			.food-icon {
				width: 61rpx;
				height: 61rpx;
				margin-right: 31rpx;
			}

			.food-title {
				margin-bottom: 12rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;

			}

			.food-tips {

				font-weight: 400;
				font-size: 24rpx;
				color: #818181;

			}
		}

		.facilities {
			width: 100vw;
			padding: 38rpx 40rpx 0 40rpx;

			.facilities-name {
				margin-bottom: 30rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
			.facilities-info{
				display: grid;
				grid-template-columns: repeat(4,1fr);
			}
			.facilities-icon {
				width: 94rpx;
				height: 94rpx;
			}

			.facilities-title {
				margin:17rpx 0 30rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(0,0,0,0.87);

			}


		}

		.center-slot {
			color: #FFF;
		}

		.nav-img {
			margin-top: 40rpx;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			width: 670rpx;
			margin-top: 42rpx;

			.grid-item {
				margin-bottom: 36rpx;
			}

			.gird-item-t {
				display: block;
				margin-top: 18rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(0, 0, 0, 0.87);
			}
		}

		.tab-type {
			margin-top: 40rpx;
			width: 670rpx;
			
			.title {
				font-weight: 400;
				font-size: 36rpx;
				color: #000000;

			}

			.tag-box {
				margin-top: 21rpx;
			}

			.tag {
				padding: 0 13rpx;
				line-height: 41rpx;
				height: 41rpx;
				background: #FAEBD6;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #B99361;
				margin-right: 12rpx;
			}

			.zan-icon {
				width: 24rpx;
				height: 28rpx;
				margin-right: 13rpx;
			}

			.zan-text-icon {
				width: 56rpx;
				height: 26rpx;
			}

			.tip {
				margin: 22rpx 0 31rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #818181;
				line-height: 30rpx;
			}

			.tips {
				margin-bottom: 29rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;

				font-weight: 400;
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.87);

				.location {
					margin: 0 17rpx;
					width: 25rpx;
					height: 33rpx;
				}
			}

			.tab-type-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
			}

			.goods-img {
				margin-right: 20rpx;
			}

			.goods-info {
				// padding: ;
				flex: 1;
			}

			.goods-name {
				margin-top: 35rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.goods-desc {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #7E7E7E;
				margin: 22rpx 0 17rpx;

				.tag {
					padding: 0 14rpx;
					height: 41rpx;
					background: #FAEBD6;
					border-radius: 5rpx 5rpx 5rpx 5rpx;

					font-weight: 400;
					font-size: 22rpx;
					color: #B99361;
					margin-right: 12rpx;
					line-height: 41rpx;

				}
			}

			.rate {
				margin-bottom: 49rpx;
			}

			.goods-price {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #818181;
			}
		}

		.tab {
			width: 670rpx;
			width: 100%;
			padding: 0 40rpx;
			z-index: 10;
			background: #ffffff;
			position: sticky;

			.tab-item {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
		}

		.banner-2 {
			width: 670rpx;
			height: 279rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			overflow: hidden;
		}

		.banner {
			position: relative;
			z-index: 3;
			width: 670rpx;
			height: 303rpx;
			margin-top: 40rpx;
			border-radius: 30rpx;
			overflow: hidden;
			transition: all 1s;
		}

		.indicator {
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					width: 18px;
					background-color: #ffffff;
				}
			}
		}

		.nav-fix {
			position: fixed;
			top: 0;
			left: 0;
			transition: all 1s;
		}


		.nav-tit {
			position: fixed;
			z-index: 1;
			left: 53rpx;
		}

		.nav-box {
			position: fixed;
			left: 0;
			width: 100vw;
			background: #CC1D1D;
			z-index: 1;
			padding: 0 51rpx 22rpx 40rpx;

			.location {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 8rpx 0 37rpx;
			}

			.triangle {
				margin-top: 4rpx;
				width: 0;
				height: 0;
				border-top: 14rpx solid #FFF;
				border-right: 14rpx solid transparent;
				border-left: 14rpx solid transparent;
			}
		}





		.dot {
			width: 13rpx;
			height: 13rpx;
			background: #DB4949;
			border-radius: 50%;
			position: absolute;
			top: -4rpx;
			right: 0;
		}

		.search-box {
			width: 539rpx;
			height: 72rpx;
			// background: rgba(255, 255, 255, 0.6);
			// border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

	}
</style>